<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="4">
          <el-select v-model="attItemId" placeholder="请选考核" @change="itemChange">
            <el-option
              v-for="item in attItems"
              :key="item.id"
              :label="item.attendanceTime"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button v-if="yuechuBtn" @click="openYueChuPage" type="primary">添加月初计划</el-button>
        </el-col>
        <el-col :span="3">
          <el-button v-if="subyuechuBtn" type="primary" @click="submitYueChu(1)">提交月初计划</el-button>
        </el-col>
        <el-col :span="3">
          <el-button v-if="yuemoBtn" @click="openYueMoPage" type="primary">添加绩效</el-button>
        </el-col>
        <el-col :span="3">
          <el-button v-if="subyuemoBtn" type="primary" @click="submitYueChu(2)">提交绩效</el-button>
        </el-col>
      </el-row>
      <el-table :data="commitlistTable" style="width: 100%;margin-top:2px;">
        <el-table-column prop="worktime" label="工作时间" width="130"></el-table-column>
        <el-table-column prop="finishResultStr" label="完成结果" width="145"></el-table-column>
        <el-table-column label="工作内容" prop="workInfo" width="400"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.empStatus==0"
              size="small"
              @click="updateYuChePage(scope.row.id)"
            >编辑计划</el-button>
            <el-button
              type="text"
              v-if="scope.row.empStatus==0"
              size="small"
              @click="del(scope.row.id)"
            >删除计划</el-button>

            <el-button
              type="text"
              v-if="scope.row.itemStutas==3 && scope.row.empStatus==1"
              size="small"
              @click="updateYueMoPage(scope.row.id)"
            >编辑绩效</el-button>
            <el-button
              type="text"
              v-if="scope.row.itemStutas==3 &&scope.row.empStatus==1"
              size="small"
              @click="del(scope.row.id)"
            >删除绩效</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="添加月初计划" :visible.sync="YueChudialogAttVisible" width="40%">
      <el-form ref="YueChuForm" :model="YueChuForm" :rules="YueChuFormRules" label-width="95px">
        <el-form-item label="开始时间" prop="StartDate">
          <el-date-picker
            v-model="YueChuForm.StartDate"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="EndDate">
          <el-date-picker
            v-model="YueChuForm.EndDate"
            autosize
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="工作重点" prop="WorkInfo">
          <el-input v-model="YueChuForm.WorkInfo" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="yuechuBtn" @click="YuChusubmitForm()">提交</el-button>
          <el-button @click="YuChuresetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改月初计划" :visible.sync="YueChuUpdatedialogAttVisible" width="40%">
      <el-form
        ref="YueChuUpdateForm"
        :model="YueChuUpdateForm"
        :rules="YueChuUpdateRules"
        label-width="95px"
      >
        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker
            v-model="YueChuUpdateForm.startDate"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            v-model="YueChuUpdateForm.endDate"
            autosize
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="工作重点" prop="workInfo">
          <el-input v-model="YueChuUpdateForm.workInfo" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateYueChuSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="添加绩效" :visible.sync="YueModialogAttVisible" width="40%">
      <el-form ref="commitForm" :model="commitForm" :rules="commitFormRules" label-width="95px">
        <el-form-item label="开始时间" prop="StartDate">
          <el-date-picker
            v-model="commitForm.StartDate"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="EndDate">
          <el-date-picker
            v-model="commitForm.EndDate"
            autosize
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="工作重点" prop="WorkInfo">
          <el-input v-model="commitForm.WorkInfo" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="完成时间" prop="FinishDate">
          <el-date-picker
            v-model="commitForm.FinishDate"
            autosize
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="完成目标" prop="Target">
          <el-input v-model="commitForm.Target" size="small"></el-input>
        </el-form-item>
        <el-form-item label="完成结果" prop="FinishResult">
          <el-select v-model="commitForm.FinishResult" placeholder="请选择完成结果" size="small">
            <el-option key="1" label="提前完成超出标准" value="1"></el-option>
            <el-option key="2" label="按时完成超出标准" value="2"></el-option>
            <el-option key="3" label="按时完成达到标准" value="3"></el-option>
            <el-option key="4" label="按时完成不标准" value="4"></el-option>
            <el-option key="5" label="未完成" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="yumobtn" @click="submitForm()">提交</el-button>
          <el-button @click="YueMoresetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改绩效" :visible.sync="YueMoupdatedialogAttVisible" width="40%">
      <el-form
        ref="YueMoupdatedForm"
        :model="YueMoupdatedForm"
        :rules="YueMoupdatedFormRules"
        label-width="95px"
      >
        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker
            v-model="YueMoupdatedForm.startDate"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            v-model="YueMoupdatedForm.endDate"
            autosize
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="工作重点" prop="workInfo">
          <el-input v-model="YueMoupdatedForm.workInfo" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="完成时间" prop="finishDate">
          <el-date-picker
            v-model="YueMoupdatedForm.finishDate"
            autosize
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="完成目标" prop="target">
          <el-input v-model="YueMoupdatedForm.target" size="small"></el-input>
        </el-form-item>
        <el-form-item label="完成结果" prop="finishResult">
          <el-select v-model="YueMoupdatedForm.finishResult" placeholder="请选择完成结果" size="small">
            <el-option key="1" label="提前完成超出标准" value="1"></el-option>
            <el-option key="2" label="按时完成超出标准" value="2"></el-option>
            <el-option key="3" label="按时完成达到标准" value="3"></el-option>
            <el-option key="4" label="按时完成不标准" value="4"></el-option>
            <el-option key="5" label="未完成" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="yumobtn" @click="updateYueMoForm()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      corpId: null,
      yumobtn: false,
      yuechuBtn: false,
      commitlistTable: null,
      dialogAttVisible: false,
      workInfo: null,
      currentUid: null,
      attItemId: null,
      attItems: null,
      yuechuBtn: false,
      yuemoBtn: false,
      attEmp: null,
      subyuechuBtn: false,
      subyuemoBtn: false,
      YueChudialogAttVisible: false,
      YueChuForm: {
        StartDate: null,
        EndDate: null,
        WorkInfo: null,
        Type: null,
        Target: null,
        FinishResult: null,
        EmpId: null,
        AttendanceId: null
      },
      YueChuFormRules: {
        StartDate: [
          { required: true, message: "请选择开始时间", trigger: "blur" }
        ],
        EndDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" }
        ],
        WorkInfo: [
          { required: true, message: "请填写工作重点", trigger: "blur" }
        ]
      },
      YueChuUpdatedialogAttVisible: false,
      YueChuUpdateForm: {},
      YueChuUpdateRules: {
        startDate: [
          { required: true, message: "请选择开始时间", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" }
        ],
        workInfo: [
          { required: true, message: "请填写工作重点", trigger: "blur" }
        ]
      },
      YueModialogAttVisible: false,
      commitForm: {
        StartDate: null,
        EndDate: null,
        WorkInfo: null,
        FinishDate: null,
        Target: null,
        FinishResult: null,
        EmpId: null,
        Type: 2
      },
      commitFormRules: {
        StartDate: [
          { required: true, message: "请选择开始时间", trigger: "blur" }
        ],
        EndDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" }
        ],
        WorkInfo: [
          { required: true, message: "请填写工作重点", trigger: "blur" }
        ],
        FinishDate: [
          { required: true, message: "请选择完成时间", trigger: "blur" }
        ],
        Target: [
          { required: true, message: "请填写完成目标", trigger: "blur" }
        ],
        FinishResult: [
          { required: true, message: "请选择完成结果", trigger: "blur" }
        ]
      },
      YueMoupdatedialogAttVisible: false,
      YueMoupdatedForm: {},
      YueMoupdatedFormRules: {
        StartDate: [
          { required: true, message: "请选择开始时间", trigger: "blur" }
        ],
        EndDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" }
        ],
        WorkInfo: [
          { required: true, message: "请填写工作重点", trigger: "blur" }
        ],
        FinishDate: [
          { required: true, message: "请选择完成时间", trigger: "blur" }
        ],
        Target: [
          { required: true, message: "请填写完成目标", trigger: "blur" }
        ],
        FinishResult: [
          { required: true, message: "请选择完成结果", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getJsApiTeckit();
    //this.getCommits();
  },
  methods: {
    async getJsApiTeckit() {
      var result = await this.$httpd.get("/DingDingSecurity/GetJsapiTicket");
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.corpId = result.data.corpId;
      //this.getCode(result.data.corpId);
      this.getCode2(result.data.corpId);
    },
    //获取个人免登code
    getCode(corpId) {
      var that = this;
      that.$dd.ready(() => {
        that.$dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: function(info) {
            that.GetEmpId(info.code);
          }
        });
      });
    },
    async getCode2(corpId) {
      var that = this;
      that.$dd.ready(() => {
        that.$dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: function(info) {
            that.getDeparts(info.code);
          }
        });
      });
    },
    async getDeparts(code) {
      var result = await this.$httpd.get(
        `/EmpSalary/GetdepartmentById?code=${code}`
      );
      if (result.status != 200) {
        this.$message.error("获取部门数据出错");
        return;
      }
      this.getAttendanceItems(result.data.parentid);
    },
    async getAttendanceItems(departId) {
      var result = await this.$httpd.get(
        `/AttendanceItem/QueryAttendanceItems?dePartId=${departId}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.attItems = result.data.data;
    },
    itemChange() {
      this.getCode(this.corpId);
    },
    async GetEmpId(code) {
      var result = await this.$httpd.get(
        `/EmpSalary/GetUserByCode?code=${code}`
      );
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.currentUid = result.data.userid;
      this.getEmpStatus(this.attItemId, this.currentUid);
      this.getCommitList(this.attItemId, this.currentUid);
    },
    async getEmpStatus(itemId, eid) {
      var result = await this.$httpd.get(
        `/AttendanceEmp/GetAttendanceEmpStatusByAttidAndEid?attid=${itemId}&empId=${eid}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.attEmp = result.data.data;
      //考核的状态
      var item = this.attItems.find(t => {
        return t.id == this.attItemId;
      });

      if (item.stutas == 1 && this.attEmp.status == 0) {
        this.yuechuBtn = true;
        this.subyuechuBtn = true;
      } else {
        this.yuechuBtn = false;
        this.subyuechuBtn = false;
      }
      if (item.stutas == 3 && this.attEmp.status == 1) {
        this.yuemoBtn = true;

        this.subyuemoBtn = true;
      } else {
        this.yuemoBtn = false;
        this.subyuemoBtn = false;
      }
    },
    openYueChuPage() {
      this.YueChudialogAttVisible = true;
      this.yuechuBtn = false;
    },
    async YuChusubmitForm() {
      this.$refs.YueChuForm.validate(async v => {
        if (v) {
          this.yuechuBtn = true;
          this.YueChuForm.EmpId = this.currentUid;
          this.YueChuForm.FinishResult = 5;
          this.YueChuForm.Type = 1;
          this.YueChuForm.AttendanceId = this.attItemId;
          var result = await this.$httpd.post(
            "/AttendanceCommint/Add",
            this.YueChuForm
          );
          if (result.status != 200 || result.data.returnStatus == 0) {
            this.$message.error(result.data.message);
            return;
          }
          this.YueChudialogAttVisible = false;
          this.YuChuresetForm();
          this.getCommitList(this.attItemId, this.currentUid);
          this.$message.success({
            message: result.data.message,
            type: "success"
          });
        }
      });
    },
    YuChuresetForm() {
      this.$refs.YueChuForm.resetFields();
    },
    async getCommitList(attid, empId) {
      var result = await this.$httpd.get(
        `/AttendanceCommint/QueryAttendanceCommints?attid=${attid}&empId=${empId}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.commitlistTable = result.data.data;
    },
    //提交月初计划
    async submitYueChu(Status) {
      var result = await this.$httpd.post(
        "/AttendanceEmp/AttendanceEmpChanageStatus",
        {
          AttendanceItemId: this.attItemId,
          EmpId: this.currentUid,
          Status: Status
        }
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.itemChange();
      this.$message.success({
        message: result.data.message,
        type: "success"
      });
    },
    async updateYuChePage(id) {
      this.YueChuUpdatedialogAttVisible = true;
      var result = await this.$httpd.get(
        `AttendanceCommint/QueryAttendanceCommintById?id=${id}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.YueChuUpdateForm = result.data.data;
    },
    async updateYueChuSubmit() {
      this.$refs.YueChuUpdateForm.validate(async v => {
        if (v) {
          this.YueChuUpdateForm.finishResult = parseInt(
            this.YueChuUpdateForm.finishResult
          );
          var result = await this.$httpd.post(
            "/AttendanceCommint/Update",
            this.YueChuUpdateForm
          );
          if (result.status != 200 || result.data.returnStatus == 0) {
            this.$message.error(result.data.message);
            return;
          }
          this.$message.success({
            message: result.data.message,
            type: "success"
          });
          this.YueChuUpdatedialogAttVisible = false;
          this.getCommitList(this.attItemId, this.currentUid);
        }
      });
    },
    async del(id) {
      var result = await this.$httpd.post(`/AttendanceCommint/Del`, { id: id });
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.getCommitList(this.attItemId, this.currentUid);
      this.$message.success({
        message: result.data.message,
        type: "success"
      });
    },
    openYueMoPage() {
      this.YueModialogAttVisible = true;
      this.yumobtn = false;
    },
    async submitForm() {
      this.$refs.commitForm.validate(async v => {
        if (v) {
          this.yumobtn = true;
          this.commitForm.EmpId = this.currentUid;
          this.commitForm.AttendanceId = this.attItemId;
          this.commitForm.FinishResult = parseInt(this.commitForm.FinishResult);
          var result = await this.$httpd.post(
            "/AttendanceCommint/Add",
            this.commitForm
          );
          if (result.status != 200 || result.data.returnStatus == 0) {
            this.$message.error(result.data.message);
            return;
          }
          this.YueModialogAttVisible = false;
          this.getCommitList(this.attItemId, this.currentUid);
          this.YueMoresetForm();
          this.$message.success({
            message: result.data.message,
            type: "success"
          });
        }
      });
    },
    YueMoresetForm() {
      this.$refs.commitForm.resetFields();
    },
    async updateYueMoPage(id) {
      this.YueMoupdatedialogAttVisible = true;
      var result = await this.$httpd.get(
        `AttendanceCommint/QueryAttendanceCommintById?id=${id}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.YueMoupdatedForm = result.data.data;
    },
    async updateYueMoForm() {
      this.$refs.YueMoupdatedForm.validate(async v => {
        if (v) {
          this.YueMoupdatedForm.finishResult = parseInt(
            this.YueMoupdatedForm.finishResult
          );
          var result = await this.$httpd.post(
            "/AttendanceCommint/Update",
            this.YueMoupdatedForm
          );
          this.YueMoupdatedialogAttVisible = false;
          this.getCommitList(this.attItemId, this.currentUid);
          this.$message.success({
            message: result.data.message,
            type: "success"
          });
        }
      });
    }
  }
};
</script>